<template>
	<view>
		<view class="img text-center mt-20 mb-50">
			<image :src="item.img1" mode="" @click="chooseImg" v-for="(item,i) in img" :key="i"></image>
		</view>
		<u-field v-model="name" label-width="80" label="昵称" placeholder="请填写昵称">
			<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
		</u-field>
		<u-field v-model="sex" label-width="80" label="性别" :disabled="true" @click="show=true">
			<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
		</u-field>
		<u-field v-model="userInfo.mobile" label-width="80" label="手机" :disabled="true" placeholder="前去绑定手机号" @click="goPhone" v-if="0">
			<u-icon slot="right" name="arrow-right" color="#999" v-if="!userInfo.mobile"></u-icon>
		</u-field>
		<view class="fixed-bottom pb-60">
			<u-button type="warning" @click="save">保存</u-button>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import {
		upload
	} from '../../common/common.js';
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				name: '',
				city:'',
				img: [{
					img1: '../../static/user.png'
				}], //本地预览路径
				imgurl: '', //上传图片路径
				sex:'',
				show: false,
				list: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				]
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		onLoad() {
			this.name = this.userInfo.nickname;
			this.sex = this.userInfo.gender==2?'女':'男';
			this.city = this.userInfo.areas_id;
			this.img[0].img1 = this.userInfo.avatar?this.userInfo.avatar:"../../static/user.png";
			this.imgurl = this.userInfo.avatar;
		},
		methods: {
			chooseImg() {
				upload().then(data => {
					this.img = data
					let arr = []
					data.forEach(item => {
						arr.push(item.img2)
					});
					
					this.imgurl = arr.join(',')
				})
			},
			// 去绑定手机号
			goPhone(){
				if(!this.userInfo.mobile){
					uni.navigateTo({
						url:'/pages/login/phone?type=1'
					})
				}
			},
			// 选择性别
			confirm(e) {
				this.sex = e[0].label
			},
			save(){
				this.$http('/api/user/profile',{
					nickname: this.name,
					gender: this.sex=='男'?1:2,
					avatar: this.imgurl
				},"POST").then(data=>{
					this.$store.dispatch('updateUserInfo')
					uni.showToast({
						title:'修改个人资料成功'
					})
					setTimeout(()=>{
						uni.navigateBack({
							
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-field .u-label-text {
		font-weight: 400 !important;
	}
	/deep/.u-primary-hover {
		background-color: $yellow !important;
	}
	
	/deep/.u-btn--primary--disabled {
		background-color: $bg-1 !important;
	}
	.img {
		image {
			width: 168rpx;
			height: 168rpx;
			border-radius: 50%;
		}
	}
</style>
